<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <div class="cmt-box">
          <!-- 头像 -->
          <van-image fit="cover" round :src="item.aut_photo" />
          <!-- 内容 -->
          <div class="center-box">
            <div class="name">{{ item.aut_name }}</div>
            <div class="content">{{ item.content }}</div>
            <div class="time-box">
              <span class="time">{{ item.pubdate | formatTime }}</span>
              <van-button @click="showReply(item)" plain size="mini"
                >回复({{ item.reply_count }})</van-button
              >
            </div>
          </div>
          <!-- 点赞图标 -->
          <van-icon
            :class="{ like: item.is_liking }"
            :name="item.is_liking ? 'like' : 'like-o'"
            @click="zan(item)"
          />
        </div>
      </van-cell>
    </van-list>
    <!-- 输入栏 -->
    <div class="input-box">
      <van-field
        @keyup.enter="send"
        v-model="cmt"
        center
        clearable
        placeholder="请输入评论内容"
      >
        <template #button>
          <van-button @click="send" size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>

    <van-action-sheet v-model="replyShow" title="发表回复">
      <my-reply
        v-if="replyShow"
        :item="currentItem"
        @add="currentItem.reply_count++"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { getCmtListAPI, sendCmtAPI, likeAPI, cancelLikeAPI } from '@/api/comment'
import MyReply from './MyReply.vue'
export default {
  components: {
    MyReply
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      cmt: '',
      offset: null,
      replyShow: false,
      currentItem: {}
    }
  },
  methods: {
    async zan (item) {
      if (item.is_liking) {
        // 要取消
        await cancelLikeAPI(item.com_id)
      } else {
        // 要点赞
        await likeAPI(item.com_id)
      }

      item.is_liking = !item.is_liking
    },
    showReply (item) {
      // 1. 显示出sheet
      this.replyShow = true
      // 2. 把被点的item存起来好赋值
      this.currentItem = item
    },
    async send () {
      // 非空判断
      if (this.cmt === '') return this.$toast('请输入内容')

      // 能来到这代表有内容，就应该发请求
      const res = await sendCmtAPI({
        // 如果是评论，传文章id
        target: this.$route.params.id,
        content: this.cmt
      })

      // 把新增成功的评论加到数组里的前面
      this.list.unshift(res.data.new_obj)
      // 清空输入的内容
      this.cmt = ''
    },
    async onLoad () {
      const res = await getCmtListAPI({
        // 获取文章的评论，传a
        type: 'a',
        // 传文章id
        source: this.$route.params.id,
        // 传null代表查第一页
        offset: this.offset
      })

      // 把数据加到数组
      this.list.push(...res.data.results)

      // 把last_id存到offset里，下次就能从这条id后面开始查询
      this.offset = res.data.last_id

      // 结束本次加载状态
      this.loading = false

      // 判断是否全部加载完
      if (this.list.length >= res.data.total_count) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
::v-deep {
  .like {
    color: red;
  }
  .van-list {
    margin-bottom: 53px;
  }
  .input-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
  }

  .cmt-box {
    display: flex;
    .van-image {
      width: 40px;
      height: 40px;
    }
    .center-box {
      flex: 1;
      margin-left: 15px;

      .name {
        color: #5073a2;
      }
      .content {
        margin: 13px 0;
      }

      .time-box {
        display: flex;
        align-items: center;
        .time {
          color: gray;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
